<!-- 全屏切换组件 -->
<template>
  <div>
    <svg
      t="1572950239318"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3950"
      @click="screenFull">
      <path d="M41.91 682.266h0.14a41.91 41.91 0 0 1 41.91 41.91v250.929a41.91 41.91 0 0 1-41.91 41.91h-0.14A41.91 41.91 0 0 1 0 975.105V724.176a41.91 41.91 0 0 1 41.91-41.91z" p-id="3951" fill="#48576a"/>
      <path d="M43.307 933.32h252.088a41.91 41.91 0 0 1 41.91 41.91 41.91 41.91 0 0 1-41.91 41.91H43.307a41.91 41.91 0 0 1-41.91-41.91 41.91 41.91 0 0 1 41.91-41.91z" p-id="3952" fill="#48576a"/>
      <path d="M13.495 1002.905a41.742 41.742 0 0 1 0.964-59.163l341.846-329.817a41.91 41.91 0 1 1 58.394 60.071L72.853 1003.869a42.078 42.078 0 0 1-59.358-0.964zM981.965 5.588h0.125a41.91 41.91 0 0 1 41.91 41.91v250.943a41.91 41.91 0 0 1-41.91 41.91h-0.126a41.91 41.91 0 0 1-41.91-41.91V47.498a41.91 41.91 0 0 1 41.91-41.91z" p-id="3953" fill="#48576a"/>
      <path d="M728.605 5.588h252.088a41.91 41.91 0 0 1 41.91 41.91 41.91 41.91 0 0 1-41.91 41.91H728.605a41.91 41.91 0 0 1-41.91-41.91 41.91 41.91 0 0 1 41.91-41.91z" p-id="3954" fill="#48576a"/>
      <path d="M1010.505 19.698a41.742 41.742 0 0 1-0.964 59.163L667.695 408.692a41.91 41.91 0 1 1-58.394-60.071L951.147 18.804a42.078 42.078 0 0 1 59.358 0.894zM48.895 0h250.929a41.91 41.91 0 0 1 41.91 41.91v0.126a41.91 41.91 0 0 1-41.91 41.91H48.895a41.91 41.91 0 0 1-41.91-41.91v-0.126A41.91 41.91 0 0 1 48.895 0z" p-id="3955" fill="#48576a"/>
      <path d="M48.895 1.397a41.91 41.91 0 0 1 41.91 41.91v252.158a41.91 41.91 0 0 1-41.91 41.91 41.91 41.91 0 0 1-41.91-41.91V43.307a41.91 41.91 0 0 1 41.91-41.91z" p-id="3956" fill="#48576a"/>
      <path d="M21.095 13.495a41.742 41.742 0 0 1 59.163 0.964l329.817 341.846a41.91 41.91 0 1 1-60.071 58.394L20.131 72.853a42.078 42.078 0 0 1 0.964-59.358z m704.464 926.56h250.943a41.91 41.91 0 0 1 41.91 41.91v0.125a41.91 41.91 0 0 1-41.91 41.91H725.559a41.91 41.91 0 0 1-41.91-41.91v-0.126a41.91 41.91 0 0 1 41.91-41.91z" p-id="3957" fill="#48576a"/>
      <path d="M976.502 686.75a41.91 41.91 0 0 1 41.91 41.91v252.033a41.91 41.91 0 0 1-41.91 41.91 41.91 41.91 0 0 1-41.91-41.91V728.605a41.91 41.91 0 0 1 41.91-41.854z" p-id="3958" fill="#48576a"/>
      <path d="M1004.302 1010.505a41.742 41.742 0 0 1-59.163-0.964L615.308 667.695a41.91 41.91 0 1 1 60.071-58.394l329.817 341.846a42.078 42.078 0 0 1-0.894 59.358z" p-id="3959" fill="#48576a"/>
    </svg>
  </div>
</template>

<script>
import screenFull from 'screenfull';

export default {
  name: 'ScreenFull',
  data() {
    return {
      // 是否全屏
      isFullscreen: false
    };
  },
  methods: {
    screenFull() {
      if (!screenFull.enabled) {
        this.$message({
          message: '浏览器不支持全屏切换',
          type: 'warning'
        });
        return false;
      } else {
        screenFull.toggle();
      }
    }
  }
};
</script>

<style scoped>
.icon {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;;
  width: 22px;
  height: 22px;
  vertical-align: 5px;
}
</style>
